<template>
  <view class="charts">
    <view class="card">
      <u-cell-group class="card__head">
        <u-cell-item
          title="收益趋势"
          :arrow="false"
          :center="true"
          bg-color="#ffffff"
        >
          <u-image
            :src="thumb"
            width="30"
            height="30"
            slot="icon"
            class="card__icon mr-10"
          ></u-image>
        </u-cell-item>
      </u-cell-group>

      <qiun-data-charts
        type="line"
        :opts="opts"
        :chartData="tradeChartData"
        class="charts__column"
      />
    </view>

    <view class="card">
      <u-cell-group class="card__head">
        <u-cell-item
          title="收益趋势"
          :arrow="false"
          :center="true"
          bg-color="#ffffff"
          :value-style="{ color: '#9D60FF' }"
        >
          <u-image
            :src="thumb"
            width="30"
            height="30"
            slot="icon"
            class="card__icon mr-10"
          ></u-image>
        </u-cell-item>
      </u-cell-group>

      <scroll-view class="scroll-view_H" scroll-x="true">
        <view class="scroll-header">
          <view class="scroll-item"> 日期 </view>
          <view class="scroll-item"> 总收益 </view>
          <view class="scroll-item"> 交易收益 </view>
          <view class="scroll-item"> 流量卡收益 </view>
          <view class="scroll-item"> 其他收益 </view>
          <view class="scroll-item"> 返现收益 </view>
        </view>

        <view class="scroll-content" v-for="(item, index) in list">
          <view class="scroll-item">
            {{ item.date }}
          </view>
          <view class="scroll-item">
            {{ item.totalAmount }}
          </view>
          <view class="scroll-item">
            {{ item.posProfile }}
          </view>
          <view class="scroll-item">
            {{ item.flowProfit }}
          </view>
          <view class="scroll-item">
            {{ item.otherProfit }}
          </view>
          <view class="scroll-item">
            {{ item.activeProfit }}
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '收益趋势',
      thumb: '/static/image/benefit/icon_trans_profit.png',
      opts: {
        color: [
          '#9D60FF',
          '#91CB74',
          '#FAC858',
          '#EE6666',
          '#73C0DE',
          '#3CA272',
          '#FC8452',
          '#9A60B4',
          '#ea7ccc',
        ],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 2,
        },
        extra: {
          line: {
            type: 'curve',
            width: 2,
            activeType: 'solid',
          },
        },
      },
      tradeChartData: {},
      data: {
        trendType: 3, //1 7天 2 30天 3 半年
        channelNo: '',
      },
      list: [],
    };
  },
  mounted() {
    this.getLists();
  },
  methods: {
    getLists() {
      let categories = [],
        series = [];
      const _let = this;
      this.$zx.order_api.incomeTrend(this.data).then((data) => {
        _let.list = data;
        data.forEach(function (item, index, array) {
          categories.push(item.date);
          series.push(item.totalAmount);
          console.log('incomeTrend----->140', JSON.stringify(data));
          let res = {
            categories: categories,
            series: [
              {
                name: '交易额',
                data: series,
              },
            ],
          };
          _let.tradeChartData = JSON.parse(JSON.stringify(res));
          console.log('res----->151', res);
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.charts {
  padding: 20rpx 0;
}

.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx 10rpx;
}

.u-body-item image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}

.card {
  background-color: white;
  border-radius: 20rpx;
  margin: 20rpx;

  &__icon {
    margin-bottom: 15rpx;
  }
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-header,
.scroll-content {
  display: flex;
  flex-wrap: nowrap;
}

.scroll-item {
  flex-shrink: 0;
  width: 150rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
.charts__column {
  font-size: 24rpx;
}
</style>
